<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />
    <!-- 列表等内容 -->
    <div class="bottom_box">
      <!-- 左侧列表 -->
      <van-sidebar v-model="activeKey" >
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
          @click="onChange(item.id)"
        />
      </van-sidebar>
      <!-- 右边盒子布局 -->
      <div class="right">
        <img :src="currentCategory.banner_url" alt="" />
        <h3>─{{ currentCategory.name }}─</h3>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryData,getCurrentData } from "@/utils/http";
export default {
  name: "Category",
  props: [""],
  data() {
    return {
      value: "",
      activeKey: 0, //默认索引
      categoryList: [],
      currentCategory: {},
    };
  },

  components: {},

  computed: {},

  created() {
    this.getData() 
  },

  mounted() {},

  methods: {
    onChange(id) {
      this.activeKey = id;
      // console.log(index);
      //点击调用当前页
      getCurrentData({id:id}).then(res=>{
        // console.log(res);
        this.currentCategory=res.data.currentCategory
      }).catch((err) => {
        console.log(err);
      })
    },
    getData() {
      getCategoryData().then((res) => {
        // console.log(res);
        this.categoryList = res.data.categoryList;
        // console.log(this.categoryList);
        this.currentCategory = res.data.currentCategory;
      });
    },
  },
};
</script>
<style lang='less' scoped>
.bottom_box {
  display: flex;
  text-align: center;
  .right {
    flex: 1;
    img {
      width: 100%;
      display: block;
    }
    h3{
      font-size: 16px;
      margin-top: 10px;
    }
  }
}
</style>